<template>
    <div class="carsouelDetail">
        <p class="header_detail">轮播小图</p>
        <!-- 添加图片 -->

        <div class="detail">
            <p class="detail_explain">· 添加图片，建议图片尺寸为宽750像素，最高不超过1536像素；</p>
            <p class="detail_explain">· 要求一组内的图片高度必须一致；</p>   
            <p class="detail_explain">· 大小不超过300KB；</p>
        </div>
        <div class="detail_content">
                <ul>
                    <li v-for='(item,index) in imgList' :key='index'>
                        <div class="imgBox">
                            <div class="left">
                                <div class="left_btns">
                                    <p class="top_btn" @click='goUpStep(index,true)'>
                                        <img src="@/assets/img/editContent/icon-pic-up-nor.png" alt="">
                                    </p>
                                    <p @click='goUpStep(index,false)'>
                                        <img src="@/assets/img/editContent/icon-pic-down-nor.png" alt="">
                                    </p>
                                </div>
                                <div class="left_imgs" @click='getIndex(index)'>
                                    <el-upload
                                        class="avatar-uploader"
                                        action='#'
                                        :auto-upload="false"
                                        :show-file-list="false"
                                        :on-change='getImg'
                                        :on-remove="handleRemove"
                                        :http-request="uploadImg"
                                    >
                                        <img v-if="imgList[index].imageUrl" :src="imgList[index].imageUrl" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"><span class="upload_text">添加图片</span></i>
                                        <div class="img_loading" v-if='imgList[index].imageUrl'>
                                            <p>更换图片</p> 
                                        </div>
                                    </el-upload>
                                </div>
                            </div>
                            <p class="jumpUrlBox">
                                <span>微信小程序链接（选填）</span>    
                                <!-- <el-input v-model='imgList[index].wxJumpUrl'></el-input> -->
                                <c-linkselect v-model="imgList[index].wxJumpUrl"  @change="toParent"></c-linkselect >

                            </p>
                            <div class="right" @click='deleteRow(index)'></div>
                        </div>
                    </li>
                </ul>
                <div class="addBtns" @click='addRow'>
                    <span >添加广告图({{imgList.length}}/5)</span> 
                </div>
            </div>
        <div class="detail">
            <el-form ref="form" label-position="top"  :model="data" >
                <el-form-item >
                    <p class="form_title">自动滚动时间  <span>(0为不自动滚动，最大5秒)</span></p>
                    <el-slider
                        v-model="data.time"
                        show-input
                        :max='5'
                        @change='toParent'
                        :step="1">
                    </el-slider>
                </el-form-item>
                <el-form-item>
                    <!-- <el-radio-group v-model="data.carouselType" @change='toParent'>
                        <el-radio label="normal">样式一</el-radio>
                        <el-radio label="card">样式二</el-radio>
                    </el-radio-group>  -->
                    <p class="form_title">轮播指示器  <span></span></p>
                   <el-col :span='12'>
                        <div @click='changeCarouselType(1)' class="carouselType carouselType1" :class="{'activeType1': data.carouselType == 1}">
                            <p class="react_type"></p>
                        </div>
                   </el-col>
                   <el-col :span='12'>
                        <div  @click='changeCarouselType(2)' class="carouselType carouselType2" :class="{'activeType2': data.carouselType == 2}">
                            <p class="react_type"></p>
                        </div>
                   </el-col>
                </el-form-item>
                <el-form-item>
                    <p class="form_title">上边框距离  <span>(0为贴合，最大100像素)</span></p>
                    <el-slider
                        v-model="data.paddingTop"
                        show-input
                        :max='100'
                        :step="1"
                        @change='toParent'>
                    </el-slider>
                </el-form-item>
                <el-form-item>
                     <p class="form_title">下边框距离  <span>(0为贴合，最大100像素)</span></p>
                    <el-slider
                        v-model="data.paddingBottom"
                        show-input
                        :max='100'
                        :step="1"
                        @change='toParent'>
                    </el-slider>
                </el-form-item>
            </el-form>
            <!-- <el-button @click='toParent'>测试保存</el-button> -->
        </div>
        
    </div>
</template>

<script>
import { log } from 'util';
export default {
    data(){
        return {
            data:{
                carouselType:1,
            },
            imgList:[{id:1},{id:2}],
            time:0,
            imgHeight:0,
            activeUploadIndex:0
        }
    },
    props:{
        propData:{
            type:Object
        }
    },
    methods:{
        // 更改指示器样式
        changeCarouselType(val){
            this.data.carouselType = val;
            this.toParent();
        },
        // 获取当前点击的upload
        getIndex(index){
            if(this.activeUploadIndex ==index){
                return;
            }
            this.activeUploadIndex = index;
        },
        uploadImg(){

        },
        handleRemove(){

        },
        getImg(val){
            let that = this;
            let file = val.raw;
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload =(e)=>{ 
                that.imgList[that.activeUploadIndex].imageUrl=e.target.result;
                // 以下是获取图片真实高度，实现轮播自适应；
                var image = new Image()
                image.src = e.target.result
                image.onload =function(){
                    var naturalWidth = image.width;
                    var  naturalHeight = image.height*119/naturalWidth;
                    if(that.imgHeight < naturalHeight){
                        that.data.imgHeight = naturalHeight;
                        that.imgHeight = naturalHeight;
                    }
                    that.toParent();
                }
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        goUpStep(index,bool){  //向上 ，向下 bool:true-上 false:下
            let index1,index2;
            if(bool){ //向上
                if(index==0){
                return ;
                }
                index1 = index;
                index2 =  index1-1;
            }else{ //向下
                if(index ==this.imgList.length-1){
                return;
                }
                index1 = index;
                index2 = index1+1;
            }
            this.imgList.splice(index2,1,...this.imgList.splice(index1, 1 , this.imgList[index2]));
            this.toParent();
        },
        // 删除 
        deleteRow(index){
            this.imgList.splice(index,1)
            this.toParent();
        },
        // 添加 
        addRow(){
            if(this.imgList.length==5){
                return; 
            }
            this.imgList.push({
                id:this.imgList.length+1
            });
            this.toParent();
        },
        toParent(){
            let data = {
                ...this.data,
                imgList:this.imgList
            }
            this.$emit('toParent',data)
        }
    },
    watch:{
        propData:function(val){
           this.data = JSON.parse(JSON.stringify(this.propData)); 
        }
    },
    mounted(){
        this.data = JSON.parse(JSON.stringify(this.propData)); 
        //默认值；
        this.data.carouselType = this.data.carouselType || 1;
        this.imgList  = this.data.imgList || [];
        console.log(this.propData,'接收到的参数')
        // debugger;
    }    

}
</script>
<style lang="less" scoped>
.carsouelDetail{
    margin-bottom:80px;
}
.header_detail{
    height:50px;
    line-height:50px;
    border-bottom:1px solid #E4E4E4;
    font-size: 16px;
    color: #000000;
    padding-left:16px;
}
// 轮播图
    .detail{
        padding: 16px 16px 0 16px;
        border-top: 1px solid #E4E4E4;
        .form_title{
            position:relative;
            left:-10px;
            span{
                color: #888888;
            }
        }
        .detail_explain{
            font-size: 12px;
            line-height: 17px;
            color: #888888;
        }
        .detail_content{
            width:100%;
            ul{
                width:100%;
                height:100%;
                margin-top: 20px;
            }
            li{
                width:100%;
                margin-top: 2px;
                background:#F7F7F7;
            }
            .imgBox{
                width:100%;
                height:100%;
                display:flex;
                justify-content: space-between;
                align-items: center;
                position:relative;
                .jumpUrlBox{
                    font-size:14px;
                    line-height:24px;
                    margin-right:16px;
                }
                .left{
                    width:150px;
                    height:90px;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    .left_btns{
                        width:50px;
                        height:100%;
                        flex-direction: column;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .top_btn{
                            margin-bottom:10px;
                        }
                    }
                    .left_imgs{
                        width:72px;
                        height:62px;
                        position:relative;
                        .img_loading{
                            width:100%;
                            height:100%;
                            position:absolute;
                            background:rgba(0, 0, 0, 0.6);
                            top: 0;
                            font-size: 12px;
                            color: #FFFFFF;
                            display:none;
                            justify-content: center;
                            align-items:center;
                        }
                        .el-upload:hover .img_loading{
                           display:flex; 
                        }   
                        .upload_text{
                            font-size: 12px;
                            line-height: 17px;
                        }
                        /deep/ .avatar-uploader .el-upload {
                            border: 1px dashed #FF8244;
                            border-radius: 6px;
                            cursor: pointer;
                            position: relative;
                            overflow: hidden;
                           
                        }
                        /deep/ .avatar-uploader .el-upload:hover {
                            // border-color: #FF8244;
                        }
                        /deep/.avatar-uploader-icon {
                            font-size: 22px;
                            color:#FF8244;
                            width:62px;
                            height:62px;
                            // line-height: 98px;
                            display:flex;
                            justify-content: center;
                            align-items:center;
                            flex-direction: column;
                        }
                        /deep/.avatar {
                            width:62px;
                            height:62px;
                            display: block;
                        }
                    }
                }
                .center{
                    width:250px;
                    height:100px;
                }
                .right{
                    width:14px;
                    height:14px;
                    position:absolute;
                    top: 8px;
                    right:6px;
                    background:url('~@/assets/img/editContent/icon-ashbin-nor.png') center center/14px 14px  no-repeat;
                }
                .right:hover{
                    background:url('~@/assets/img/editContent/icon-ashbin-hov.png') center center/14px 14px  no-repeat;                    
                }
            }
            .addBtns{
                width:calc(100% - 32px);
                margin-left: 16px;
                text-align:center;
                line-height:40px;
                border:1px solid #FF8244;
                box-sizing: border-box;
                color:#FF8244;
                font-size: 14px;
                margin-top: 10px;
                margin-bottom:20px;
                cursor: pointer;
            }
        }
    }
    .carouselType{
        width:100%;
        height:58px;
        display:flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #E4E4E4;
        box-sizing: border-box;
    }
     .react_type{
        width:60px;
        height:38px;
     }
    .carouselType1{
        .react_type{
            background:url('~@/assets/img/editContent/banner-icon-type-circle-nor.png') center center/60px 38px no-repeat;
        }
    }
    .carouselType2{
        .react_type{
            background:url('~@/assets/img/editContent/banner-icon-type-square-nor.png') center center/60px 38px no-repeat;
        }
    }
    .activeType1,.activeType2{
        border: 1px solid #FF8244;
    }
    .activeType1 .react_type{
        background:url('~@/assets/img/editContent/banner-icon-type-circle-sel.png') center center/60px 38px no-repeat;
    }
    .activeType2 .react_type{
        background:url('~@/assets/img/editContent/banner-icon-type-square-sel.png') center center/60px 38px no-repeat;
    }
    /deep/.el-form-item {
        margin: 0 16px 0 16px;
        height: auto;
        display: block;
    }
    /deep/.el-slider__bar{
        background-color:#FF8244;
    }
    /deep/.el-slider__button{
        border: 2px solid #FF8244;
    }
     .eventBus{
        font-size: 14px;
        padding:5px 16px 0 10px;
        .event_title{
           margin-bottom:10px;
        }
    }
</style>